<template>
  <a-spin :spinning="loading">
    <a-popconfirm
        title="确定要作废吗？"
        ok-text="确定"
        cancel-text="取消"
        @confirm="del"
        :disabled="disabledType.includes(info?.status)"
    >
      <a-button type="primary" danger style="float: right;" :disabled="disabledType.includes(info?.status)"
      >作废</a-button
      >
    </a-popconfirm>
    <h2 style="font-weight: bold">物品明细</h2>
    <a-descriptions style="margin-top: 20px">
      <a-descriptions-item :span="3" label="价值">
        ${{ info?.priceValue }} &ensp;&ensp;&ensp; 保费：${{ info?.insuredValue }}
      </a-descriptions-item>
      <a-descriptions-item :label="'托板'+(index+1)" :span="1" v-for="(item,index) in info?.completePalletInfoList" :key="index" >
        {{ item.summary?.summary }} <br />
        包装：{{ item.summary?.packageType }}<br/>
        托板：{{ item.summary?.palletUnits }} {{ item.summary?.unitType }}<br/>
        规格：{{ item.summary?.length  }}{{dimensionlessUnits}} * {{ item.summary?.width }}{{dimensionlessUnits}} * {{ item.summary?.height }}{{dimensionlessUnits}} / {{ item.summary?.weight }}{{info?.measureCode}}<br/>
        <!-- 价值：$ {{ item.summary.value }} -->
      </a-descriptions-item>
    </a-descriptions>
    <a-alert v-if="info?.memo && info?.memo != ''" :message="info?.memo" type="success" show-icon  closable/>
    <h2 style="font-weight: bold">收货信息</h2>
    <a-form
        ref="receiveForm"
        :model="receiveState"
        :rules="receiveRules"
        :label-col="{span: 7}"
        :wrapper-col="{span: 15}"
    >
      <a-row>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationLocationName" label="地址名称" name="destinationLocationName">
            <a-input v-model:value="receiveState.destinationLocationName" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationType" label="地址类型" name="destinationType">
            <a-select allow-clear v-model:value="receiveState.destinationType">
              <a-select-option value="BUSINESS">BUSINESS</a-select-option>
              <a-select-option value="RESIDENTIAL">RESIDENTIAL</a-select-option>
              <a-select-option value="CONSTRUCTIONSITE">CONSTRUCTIONSITE</a-select-option>
              <a-select-option value="TRADESHOW">TRADESHOW</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationAddressLine1" label="详细地址1" name="destinationAddressLine1">
            <a-input v-model:value="receiveState.destinationAddressLine1" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationSpecificService" label="服务等级" name="destinationSpecificService">
            <a-select allow-clear v-model:value="receiveState.destinationSpecificService">
              <a-select-option value="OD">OD</a-select-option>
              <a-select-option value="IDD">IDD</a-select-option>
              <a-select-option value="WGD">WGD</a-select-option>
              <a-select-option value="ASSY">ASSY</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationAddressLine2" label="详细地址2" name="destinationAddressLine2">
            <a-input v-model:value="receiveState.destinationAddressLine2" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationContactName" label="联系人" name="destinationContactName">
            <a-input v-model:value="receiveState.destinationContactName" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationCityName" label="市" name="destinationCityName">
            <a-input v-model:value="receiveState.destinationCityName" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationContactPhone" label="联系电话" name="destinationContactPhone">
            <a-input v-model:value="receiveState.destinationContactPhone" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationStateCode" label="州" name="destinationStateCode">
            <a-input  v-model:value="receiveState.destinationStateCode" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationContactEmail" label="邮箱地址" name="destinationContactEmail">
            <a-input  v-model:value="receiveState.destinationContactEmail" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationZipCode" label="邮编" name="destinationZipCode">
            <a-input  v-model:value="receiveState.destinationZipCode" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationMemo" label="备注" name="destinationMemo">
            <a-input  v-model:value="receiveState.destinationMemo" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="destinationCountry" label="国家" name="destinationCountry">
            <a-input  v-model:value="receiveState.destinationCountry" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <h2 style="font-weight: bold">发货信息</h2>
    <a-form
        ref="deliveryForm"
        :model="deliveryState"
        :rules="deliveryRules"
        :label-col="{span: 7}"
        :wrapper-col="{span: 15}"
    >
      <a-row>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originDate" label="发货日期" name="originDate">
            <a-date-picker v-model:value="deliveryState.originDate" value-format="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originType" label="地址类型" name="originType">
            <a-select allow-clear v-model:value="deliveryState.originType">
              <a-select-option value="BUSINESS">BUSINESS</a-select-option>
              <a-select-option value="RESIDENTIAL">RESIDENTIAL</a-select-option>
              <a-select-option value="CONSTRUCTIONSITE">CONSTRUCTIONSITE</a-select-option>
              <a-select-option value="TRADESHOW">TRADESHOW</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="selectMode" label="报价类型" name="selectMode">
            <a-select allow-clear v-model:value="deliveryState.selectMode">
              <a-select-option value="BUSINESS">LTL</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originSpecificService" label="发货特殊服务" name="originSpecificService">
            <a-select mode="multiple" v-model:value="deliveryState.originSpecificService">
              <a-select-option value="INSIDEPICKUP">INSIDEPICKUP</a-select-option>
              <a-select-option value="LIFTGATEREQUIRED">LIFTGATEREQUIRED</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originLocationName" label="地址名称" name="originLocationName">
            <a-input v-model:value="deliveryState.originLocationName" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originContactName" label="联系人" name="originContactName">
            <a-input v-model:value="deliveryState.originContactName" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originAddressLine1" label="详细地址1" name="originAddressLine1">
            <a-input v-model:value="deliveryState.originAddressLine1" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originContactPhone" label="联系电话" name="originContactPhone">
            <a-input v-model:value="deliveryState.originContactPhone" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originAddressLine2" label="详细地址2" name="originAddressLine2">
            <a-input  v-model:value="deliveryState.originAddressLine2" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originContactEmail" label="邮箱地址" name="originContactEmail">
            <a-input  v-model:value="deliveryState.originContactEmail" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originCityName" label="市" name="originCityName">
            <a-input v-model:value="deliveryState.originCityName" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originMemo" label="备注" name="originMemo">
            <a-input  v-model:value="deliveryState.originMemo" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originStateCode" label="州" name="originStateCode">
            <a-input  v-model:value="deliveryState.originStateCode" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originZipCode" label="邮编" name="originZipCode">
            <a-input  v-model:value="deliveryState.originZipCode" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :xl="12" :xxl="12" :md="12" :lg="12">
          <a-form-item ref="originCountry" label="国家" name="originCountry">
            <a-select v-model:value="deliveryState.originCountry">
              <a-select-option value="CA">CA</a-select-option>
              <a-select-option value="US">US</a-select-option>
              <a-select-option value="DE">DE</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div style="display: flex;justify-content: center">
      <a-button type="primary" :loading="btnLoading" @click="handleSubmit" >发起询价</a-button>
      <a-button style="margin-left: 20px;"  @click="$router.push('/tail/truckDeliver')">取消</a-button>
    </div>
  </a-spin>
</template>
<script setup>
import {getTruckDeliverDetail} from "@/api/tail/detail.js";
import {message} from "ant-design-vue";
import {useRoute, useRouter} from "vue-router";
import {ref, onMounted} from "vue";
import {updateAndRate} from "@/api/tail/form.js";
const route = useRoute()
const router = useRouter()
const {id} = route.query
const info = ref({})
const loading = ref(false)
const btnLoading = ref(false)
const receiveState = ref({})
const receiveForm = ref()
const receiveRules = {
  destinationLocationName:[
    {
      required: true,
      message: '请填写地址名称',
      trigger: 'blur',
    }
  ],
  destinationType:[
    {
      required: true,
      message: '请选择地址类型',
      trigger: 'blur',
    }
  ],
  destinationAddressLine1:[
    {
      required: true,
      message: '请填写详细地址1',
      trigger: 'blur',
    }
  ],
  destinationSpecificService:[
    {
      required: true,
      message: '请选择服务等级',
      trigger: 'blur',
    }
  ],
  destinationContactName:[
    {
      required: true,
      message: '请填写联系人',
      trigger: 'blur',
    }
  ],
  destinationCityName:[
    {
      required: true,
      message: '请填写市',
      trigger: 'blur',
    }
  ],
  destinationContactPhone:[
    {
      required: true,
      message: '请填写联系电话',
      trigger: 'blur',
    }
  ],
  destinationStateCode:[
    {
      required: true,
      message: '请填写州',
      trigger: 'blur',
    },
  ],
  destinationContactEmail:[
    {
      required: true,
      message: '请填写邮箱地址',
      trigger: 'blur',
    }
  ],
  destinationZipCode:[
    {
      required: true,
      message: '请填写邮编',
      trigger: 'blur',
    }
  ],
  destinationCountry:[
    {
      required: true,
      message:'请选择国家',
      trigger: 'blur',
    }
  ]
}
const deliveryState = ref({})
const deliveryForm = ref()
const deliveryRules = {
  originDate: [
    {
      required: true,
      message: '请选择发货日期',
      trigger: 'blur',
    }
  ],
  originType: [
    {
      required: true,
      message: '请选择地址类型',
      trigger: 'blur',
    }
  ],
  selectMode: [
    {
      required: true,
      message: '请选择报价类型',
      trigger: 'blur',
    }
  ],
  originLocationName: [
    {
      required: true,
      message: '请填写地址名称',
      trigger: 'blur',
    }
  ],
  originContactName: [
    {
      required: true,
      message: '请填写联系人',
      trigger: 'blur',
    }
  ],
  originAddressLine1: [
    {
      required: true,
      message: '请填写详细地址1',
      trigger: 'blur',
    }
  ],
  originContactPhone: [
    {
      required: true,
      message: '请填写联系电话',
      trigger: 'blur',
    }
  ],
  originContactEmail: [
    {
      required: true,
      message: '请填写邮箱地址',
      trigger: 'blur',
    }
  ],
  originCityName: [
    {
      required: true,
      message: '请填写市',
      trigger: 'blur',
    }
  ],
  originStateCode: [
    {
      required: true,
      message: '请填写州',
      trigger: 'blur',
    }
  ],
  originZipCode: [
    {
      required: true,
      message: '请填写邮编',
      trigger: 'blur',
    }
  ],
  originCountry:[
      {
        required: true,
        trigger: 'blur',
        message:'请填写国家'
      }
  ]
}
const disabledType = ['ORDERED', 'CANCELLED', 'TAGGED']
const initDetail = async () => {
  try{
    loading.value = true
    const res = await getTruckDeliverDetail({id:id})
    if(!res.result) message.error('数据不存在')
    info.value = res.result ||{}
    receiveState.value = res.result ? res.result.destinationInfo : {}
    deliveryState.value = res.result ? res.result.originInfo : {}
  }catch (e){
    console.log(e)
    message.error(e)
  }finally {
    loading.value = false
  }
}
const handleSubmit = async () => {
  receiveForm.value.validate().then(() => {
    deliveryForm.value.validate().then( async () => {
      try{
        btnLoading.value = true
        for (let valueKey in receiveState.value) {
          if(receiveState.value[valueKey] === undefined || receiveState.value[valueKey] === null){
            receiveState.value[valueKey] = ''
          }
        }
        for (let valueKey in deliveryState.value) {
          if(deliveryState.value[valueKey] === undefined || deliveryState.value[valueKey] === null){
            deliveryState.value[valueKey] = ''
          }
        }
        let obj = {
          id: id,
          userOrderId: info?.value.userOrderId,
          completePalletInfoList: info?.value.completePalletInfoList,
          destinationInfo: receiveState.value,
          originInfo:deliveryState.value
        }
        const res = await updateAndRate(obj)
        message.success('询价成功')
        await router.push({path: '/tail/truckDeliver/detail', query: {id: id}})
      }catch (e){
        message.error(e)
      }finally {
        btnLoading.value = false
      }
    })
  })
}
onMounted(() => {
  initDetail()
})
</script>
<style scoped>

</style>
